<template>
  <div class="home-container layout-pd">
    <el-row class="home-card-two">
      <el-col :span="24">
        <div class="home-card-item">
          <div style="height: 100%" ref="homeLineRef"></div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="home-card-item">
          <div style="width:100%;" ref="workChart">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, reactive, markRaw,watch ,nextTick} from "vue";
import {ElCol, ElRow} from "element-plus";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "@/stores/module/themeConfig";
import {ProjectVO} from "@/leadmall/api/project/types";
import {setOption} from "@/components/echarts/axisOption"
// 定义变量内容
const homeLineRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
  global: {
    homeChartOne: null,
    dispose: [null, '', undefined],
  } as any,
  // myCharts: [] as EmptyArrayType,
  charts: {
    theme: '',
    bgColor: '',
    color: '#303133',
  },
});
const option1 = {
  title: {
    top: 30,
    left: 'center',
    text: 'Daily Step Count'
  },
  tooltip: {},
  visualMap: {
    min: 0,
    max: 10000,
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    top: 65
  },
  calendar: {
    top: 120,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: '2016',
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: false }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: getVirtualData('2016')
  }
};
// 折线图
const initLineChart = () => {
  if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
  state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));

  let optionState:any = state;
  optionState.title="政策补贴额度";
  optionState.legendData=['预购队列', '最新成交价',"成交量"];
  optionState.xData=['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  optionState.yData=[
    {
      type: 'value',
      name: '价格',
      splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
    },
  ];
  optionState.seriesData=[
    [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10],
    [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0],
    [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4,2]
  ];
  state.global.homeChartOne.setOption(setOption(optionState));
};

// 使用 ref 来引用 DOM 元素
const  workChart  = ref<HTMLElement | null>(null);
// 获取 DOM 元素，并确保元素存在
let myChart: echarts.ECharts | null = null;
const initWorkDate = ()=>{
  if (workChart.value) {
    // workChart.value.style.width = '1500px';
    workChart.value.style.height = '360px';
    if(myChart){
      myChart.dispose();
    }
    myChart = echarts.init(workChart.value);

    myChart?.setOption(option1);
  }
}
// 获取虚拟数据函数
function getVirtualData(year: string): [string, number][] {
  const date = +echarts.time.parse(year + '-01-01');
  const end = +echarts.time.parse(+year + 1 + '-01-01');
  const dayTime = 3600 * 24 * 1000;
  const data: [string, number][] = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
      Math.floor(Math.random() * 10000)
    ]);
  }
  return data;
}

const openDetail = async ( row: ProjectVO) => {
  console.log(row);
  initData();
};

const initData=()=>{
  setTimeout(() => {
    initLineChart();
  }, 500);
  setTimeout(() => {
    initWorkDate();
  }, 500);
}

defineExpose({
  openDetail
});
// 监听 pinia 中是否开启深色主题
watch(
    () => themeConfig.value.isIsDark,
    (isIsDark) => {
      nextTick(() => {
        state.charts.theme = isIsDark ? 'dark' : '';
        state.charts.bgColor = isIsDark ? 'transparent' : '';
        state.charts.color = isIsDark ? '#dadada' : '#303133';
        initData();
      });
    },
    {
      deep: true,
      immediate: true,
    }
);
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-card-two {
  overflow: hidden;
  .home-card-item {
    width: 100%;
    height: 130px;
    border-radius: 4px;
    transition: all ease 0.3s;
    padding: 20px;
    overflow: hidden;
    background: var(--el-color-white);
    color: var(--el-text-color-primary);
    border: 1px solid var(--next-border-color-light);
    &:hover {
      box-shadow: 0 2px 12px var(--next-color-dark-hover);
      transition: all ease 0.3s;
    }
    &-icon {
      width: 70px;
      height: 70px;
      border-radius: 100%;
      flex-shrink: 1;
      i {
        color: var(--el-text-color-placeholder);
      }
    }
    &-title {
      font-size: 15px;
      font-weight: bold;
      height: 30px;
    }
  }
  .home-card-item {
    height: 400px;
    width: 100%;
    overflow: hidden;
  }
}
</style>
